<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Courier.js Demo</title>
  <script src="./jquery.js"></script>

</head>

<body>
    <div class="handle-box">
        <div class="handle-btn jackIn">Jack进入房间/不捂耳朵嘴巴</div>
        <div class="handle-btn jackOut">Jack离开房间</div>
        <div class="handle-btn jackSleep">Jack捂住了耳朵嘴巴(解绑事件)</div>
        <br>
        <div class="handle-btn nancyIn">Nancy进入房间/不捂耳朵嘴巴</div>
        <div class="handle-btn nancyOut">Nancy离开房间</div>
        <div class="handle-btn nancySleep">Nancy捂住了耳朵嘴巴(解绑事件)</div>
    </div>

  <div class="x box">
    <p  c-on='who'>当前广播者：<span class="who" ></span></p>
    <p>当前广播内容：<span class="broadcast-txt"></span></p>
    <div class="history">
      

      
    </div>
  </div>
  <div class="jack box">
  </div>
  <div class="nancy box">

  </div>



</body>

</html>

<script src="./Courier.js"></script>
<script>


  let nancy = new Courier({
    el: '.nancy',
    data: { 
      name: 'nancy', 
      listence: '', 
      say: ''
    },
    init(c, cq) {
      if (c.hasViewOnDom === false) {
        cq._$('root')._append(`<div class="nancy-son">
            <p>nancy听到：<span class="listence-txt">nancy</span></p>
            <input type="text">
            <div class="btn" c-on="nancySay">say</div>
        </div>`)
      }
    },
    methods: {
      toBroadcast(c, cq, msg) {
        c.$store.trigger({who: "Nancy"})
        c.$store.trigger({listence: msg})
      },
      listenceSomeThing(c, cq, someThing) {
        cq._$(".listence-txt")._text(someThing)
      }
    },
    watcher: {
      listence: (c, newValue, oldValue) => { 
        c.methods.listenceSomeThing(newValue)

      },
      say: (c, newValue, oldValue) => {
        c.methods.toBroadcast(newValue)
      }
    },
    inbox: {
      listence: (c, newValue, oldValue) => {
        c.data.listence = newValue
      },
      
    },
    domEvents: {
      nancySay_click: (event, dom, c, cq) => {
        let text = cq._$("input")._val()
        c.methods.toBroadcast(text,1, true,8)
      }
    },
    beforeDestroy() {
      console.log("beforeDestroy")
    },
    afterDestroy() {
      console.log("afterDestroy")
    }
  })

  let jack = new Courier({
    el: '.jack',
    data: { 
      name: 'jack', 
      listence: '', 
      say: ''
    },
    init(c, cq) {
      if (c.hasViewOnDom === false) {
        cq._$('root')._append(`<div class="jack-son">
            <p>jack听到：<span class="listence-txt">jack</span></p>
            <input type="text">
            <div class="btn" c-on='jackSay'>say</div>
        </div>`)
      }
    },
    methods: {
      toBroadcast(c, cq, msg) {
        c.$store.trigger({who: 'Jack'})
        c.$store.trigger({listence: msg})
      },
      listenceSomeThing(c, cq, someThing) {
        cq._$('.listence-txt')._text(someThing)
      }
    },
    watcher: {
      listence: (c, newValue, oldValue) => { 
        c.methods.listenceSomeThing(newValue)

      },
      say: (c, newValue, oldValue) => {
        c.methods.toBroadcast(newValue)
      }
    },
    inbox: {
      listence: (c, newValue, oldValue) => {
        c.data.listence = newValue
      },
      
    },
    domEvents: {
      jackSay_click: (event, dom, c, cq) => {
        let text = cq._$(`input`)._val()
        c.methods.toBroadcast(text,1, true,8)
      }
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    afterDestroy() {
      console.log('afterDestroy')
    }
  })
  

  let x = new Courier({
    el: '.x',
    data: { 
      announcer: undefined,// 播音员
      content: undefined,
      listenersNum: 0,
      contentHistory: []
    },
    sendword: {},
    init() {},
    methods: {
      addHistory(c,cq, newHistory) {
        c.data.contentHistory.push(newHistory)
      },
      updateCurrentContent(c, cq, msg) {
        cq._$('.broadcast-txt')._text(msg)
      },
      updateAnnouncer(c, cq, msg) {
        cq._$('.who')._text(msg)
      },
      pushHistoryItemToDom(c, cq, element) {   
        cq._$('.history')._append(`<div c-on='look' class="history-item"><span class="h-who">${element.name}</span>:<span class="h-broadcast-txt">${element.msg}</span></div>`)
      }
    },
    watcher: {
      content: (c, newValue, oldValue) => {
        c.methods.updateCurrentContent(newValue)
      },
      contentHistory: (c, newValue, oldValue, methods, addElement) => {
        if (methods === 'push') {
          c.methods.pushHistoryItemToDom(addElement)
        }
      },
      announcer: (c, newValue, oldValue, methods, addElement) => {
        c.methods.updateAnnouncer(newValue)        
      }
    },
    inbox: {
      listence: (c, newValue, oldValue) => {
        c.data.content = newValue
      },
      who: (c, newValue, oldValue) => {
        c.data.announcer = newValue
      },
      broadcastHistory: (c, newValue, oldValue, method, addElement) => {
        c.data.contentHistory.push(addElement)
      }
    },
    domEvents: {
      look_click: (event, dom, c, cq) => {
        $(dom).css({color: 'green'})
      },
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    afterDestroy() {
      console.log('afterDestroy')
    }
  })
  x.init()

  let broadcast = new XCourier({
    store: {
      who: undefined,
      listence: null,
      broadcastHistory: []
    },

    submission: {
      who: (store, payload) => {
        store.who = payload
      },
      listence: (store, payload) => {
        store.listence = payload
        store.broadcastHistory.push({name: store.who, msg: payload})
      },

    }
  })
  broadcast.init()
  broadcast.extend(x).extend(nancy).extend(jack)

  // ========================================================

// =======================================================
// 为简化demo浏览,辅助操作按钮这里只使用jQuery绑定事件
$('.jackIn').click(() => {
  alert('ok, try it !')
  jack.init()
})
$('.jackOut').click(() => {
  alert('ok, try it !')
  jack.destroy(true)
})
$('.jackSleep').click(() => {
  alert('ok, try it !')
  jack.destroy()
})
$('.nancyIn').click(() => {
  alert('ok, try it !')
  nancy.init()
})
$('.nancyOut').click(() => {
  alert('ok, try it !')
  nancy.destroy(true)
})
$('.nancySleep').click(() => {
  alert('ok, try it !')
  nancy.destroy()
})

// =======================================================
</script>

<style>
  .box {
    border: 3px solid rgb(65, 64, 64);
    border-radius: 5px;
    padding: 5px;
    background-color: goldenrod;
    width: 400px;
  }
  .history{
    width: 100%;
    background: #ef701657;
    height: 300px;
    border-radius: 8px;
    overflow: auto;
    box-sizing: border-box;
    padding: 5px;
  }
  .h-broadcast-txt{
    font-style: italic;
    font-size: 12px;
    font-weight: 100;
  }

  .jack,
  .nancy {
    background-color: rgb(218, 91, 32);
    display: inline-block;
    width: 190px;
  }

  .btn {
    padding: 5px;
    border-radius: 3px;
    background-color: green;
    margin-top: 5px;
    cursor: pointer;
    width: 50px;
    text-align: center;
  }
  .handle-box{
    padding: 10px;
  }
  .handle-btn{
    background: palevioletred;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 5px;
  }
</style>